<!doctype html>
<head>
    <meta charset="utf-8" />
    <title>答题辅助系统</title>

    <style>
        html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
        header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
        table{border-collapse:collapse;border-spacing:0;}
        caption,th{text-align:left;font-weight:normal;}
        html,body,fieldset,img,iframe,abbr{border:0;}
        i,cite,em,var,address,dfn{font-style:normal;}
        [hidefocus],summary{outline:0;}
        li{list-style:none;}
        h1,h2,h3,h4,h5,h6,small{font-size:100%;}
        sup,sub{font-size:83%;}
        pre,code,kbd,samp{font-family:inherit;}
        q:before,q:after{content:none;}
        textarea{overflow:auto;resize:none;}
        label,summary{cursor:default;}
        a,button{cursor:pointer;}
        h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;}
        del,ins,u,s,a,a:hover{text-decoration:none;}
        body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,simsun;color:#333;outline:0;}
        body{background:#fff;}
        a,a:hover{color:#333;}
    </style>
    <link rel="stylesheet" type="text/css" href="{{ static_url("animate.css")}}">
    <script src="{{ static_url("jquery.min.js") }}"></script>
    <script src="{{ static_url("jquery.growl.js") }}" type="text/javascript"></script>
    <link href="{{ static_url("jquery.growl.css") }}" rel="stylesheet" type="text/css" />
    <style>
        body{
            background-color: #485F6E;
        }
        .answerTitle{
            padding:20px 0 0 80px;
            font-size: x-large;
        }
        .answerList{
            width: 80%;
            height: 100%;
            margin: 0 auto;
            background-color: #4a6271;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        .answer{
            width: 80%;
            margin: 10px auto 10px;
            padding: 10px;
            background-color: #cccccc;
            border-radius: 5px;
            box-shadow: #333333 2px 3px 3px 1px;
        }
        .answerList .answer:nth-child(1) {
            background-color: #87d6dc;
        }
        .question {
            font-weight: bold;
            font-size: 24px;
            padding: 0 0 5px 0;
            color: #485f6e;
        }
        .result {
            padding: 2px 0 2px 5px;
            line-height: 20px;
            background-color: inherit;
        }
        .result li {
            margin-bottom: 4px;
            font-size: 18px;
        }
        .count {
            display: inline-block;
            height: 15px;
            width: 15px;
            font-size: 12px;
            font-weight: bold;
            background-color: yellow;
            border-radius: 50%;
            color:black;
            text-align: center;
        }
        .zero {
            background-color: #f9627e;
        }
        .nozero{
            background-color: #62a5f9;
        }
        .rightanswer{
            background-color: #62a5f9;
            font-size: 24px;
            font-weight: block;
        }
        .rightspan{ 
            display: inline-block; 
            width: 10px;
            height:5px; 
            background: red;
            line-height: 0;
            font-size:0;
            vertical-align: middle;
            -webkit-transform: rotate(45deg);
            margin-right: 15px;
        }
        .rightspan:after{
            content:'/';
            display:block;
            width: 20px;
            height:5px; 
            background: red;
            -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
            margin-right: 15px;
        }
        .index{
            font-size: 18px;
            margin-right: 10px;
        }

        div{
          /*设置动画属性*/
          animation-duration: 0.5s;
          animation-delay: 0s;
        }

    </style>
</head>
<body>
    <h2 class="answerTitle">答题辅助系统</h2>
    <div class="answerList">
        <!-- <div class="answer">
            <div class="question">Question one : what you want to know?</div>
            <div class="result">
                <li><span class="count">5</span>A: 10 </li>
                <li><span class="count">0</span>B: 20 </li>
                <li><span class="count">0</span>C: 30 </li>
            </div>
        </div>
        <div class="answer">
            <div class="question">Question one : what you want to know?</div>
            <div class="result">
                <li><span class="count">5</span>A: 10 </li>
                <li><span class="count">0</span>B: 20 </li>
                <li><span class="count">0</span>C: 30 </li>
            </div>
        </div>
        <div class="answer">
            <div class="question">Question one : what you want to know?</div>
            <div class="result">
                <li><span class="count">5</span>A: 10 </li>
                <li><span class="count">0</span>B: 20 </li>
                <li><span class="count">0</span>C: 30 </li>
            </div>
            <button onclick="addtest()">A</button>
        </div> -->
    </div>
    <script>
        $(document).ready(function() {
            if (!window.WebSocket) {
                if (window.MozWebSocket) {
                    window.WebSocket = window.MozWebSocket;
                } else {
                    event.preventDefault();
                    event.stopPropagation();
                    return $.growl.error({
                        title: "提示",
                        message: "连接服务器失败!"
                    });
                }
            }
            var ws = new WebSocket('ws://localhost:5000/wzdt');
            ws.onopen = function(evt) {
                $.growl({
                  title: "提示",
                  message: "连接成功!"
                });
            }
            ws.onmessage = function(evt) {
                var data,question,answerlist=[],list=[],zclass;
                try{
                    data = $.parseJSON(evt.data);
                    data = data.data;
                    question = data.question;
                    has_answer = false;
                    answer_str = '';
                    if ( data.hasOwnProperty('answer') ) {
                        //答案确定
                        answerlist =  data.options;
                        has_answer = true;
                        answer_str = '<span class="answer">'+ data.answer + '<span>';
                    } else {
                        answerlist =  data.result;
                    }
                } catch(err) {
                    console.log(err);
                    return $.growl({title: "提示",message: evt.data});
                }

                for ( index in answerlist ) {
                    if ( has_answer == true ) {
                        zclass =  data.answer == answerlist[index]?'rightanswer':'';
                        rightspan =  data.answer == answerlist[index]?'<span class="rightspan"></span>':'';
                        answer = '<li class="'+zclass+'">'+rightspan+'<span class="index">'+index + ".</span>"+answerlist[index]+'</li>';
                    } else {
                        zclass = (answerlist[index]['count'] == 0) ? 'zero' : 'nozero';
                        answer = '<li class="'+zclass+'"><span class="count">'+answerlist[index]['count']+'</span><span class="index">'+index + ".</span>"+answerlist[index]['name']+'</li>';
                    }
                    
                    list.push(answer);
                }
                
                $item = $('<div id="test" class="animated slideInLeft answer"><div class="question">'+question+'</div><div class="result">' + list.join('') + '</div></div>')
                $('.answerList').prepend($item);

            }
            ws.onclose = function(evt) {
                  event.preventDefault();
                  event.stopPropagation();
                  return $.growl.error({
                    title: "提示",
                    message: "连接已关闭!"
                  });
            }
        });
        function addtest(){
                $item = $('<div id="test" class="animated slideInLeft answer"><div class="question">test</div><div class="result">777777</div></div>')
                $('.answerList').prepend($item);
            }
    </script>
</body>
</html>
